Skip to main content

20 UI_UX设计

7 steps to become a UI/UX designer，设计师从入门到精通的练级攻略。

图书和文章推荐​

  • Don’t Make Me Think ，书中大量色彩丰富的截图和包含大量信息的图表。
  • Simple and Usable Web,Mobile,and Interaction Design ，应该站在主流用户一边，以及如何从他们的真实需求和期望出发，简化设计，提升易用性。
  • Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules ，将设计准则与其核心的认知学和感知科学高度统一起来，使得设计准则更容易在具体环境中得到应用。
  • Designing Interfaces: Patterns for Effective Interaction Design ，收集并分析了很多常用的界面设计模式，帮助读者理解在实现级别的各种常用解决方案，将它们灵活地运用到自己的设计中。
  • The Psychology Principles Every UI/UX Designer Needs to Know ，讲述了 6 大用户界面用户体验设计的心理学原则。
  • 18 designers predict UI/UX trends for 2018， 18 条原则指导性的思想。
  • The Evolution of UI/UX Designers Into Product Designers ，回顾产品设计的演化过程中有一些不错的思考和想法，并提供了一些方法论。

原子设计（Atomic Design）​

  • Atomic Design 原子设计┃构建科学规范的设计系统
  • 网页设计：Atomic Design 简介及工作实例
  • Atomic Design by Brad Frost，电子书 。
  • Atomic Design ，博客。
  • Pattern lab ，一套工具。
  • Atomic Design with React
  • Atomic Components: Managing Dynamic React Components using Atomic Design

设计语言和设计系统​

Fluent Design System​

  • What’s new and coming for Windows UI: XAML and composition ，从概念上讲了一下 Fluent Design System 的各个部分。
  • Introducing Fluent Design ，介绍了 Fluent Design System 的各个部分。
  • Fluent Design: Evolving our Design System : Build 2018
  • Microsoft Build 2018 - Fluent Design System Demo
  • Microsoft Build 2018 - Fluent Design System Evolution
  • Fluent Design System inside of Microsoft: Office : Build 2018

Material Design​

  • Google I/O 2014 - Material witness: How Android material applications work
  • Material Design 官网
  • Material Design 实现的比较表
  • Material Design Lite ，Google 官方的框架
  • Materialize ，一组类似于 Bootstrap 的前端 UI 框架
  • Material-UI ，基于 Google Material Design 的 React 组件实现
  • MUI ，一个轻量级的 CSS 框架，遵循 Google 的 Material Design 设计方针

其它公司​

  • 苹果公司的设计指南
  • IBM 公司的设计语言
  • Salesforce 公司的 Lightning Design System
  • Facebook Design - What’s on our mind?

动画效果设计​

  • CodePen，分享 HTML、CSS 和 JavaScript 代码的网站，也有很多和动画效果有关
  • 动画的 12 项基本法则，了解动画效果设计的一些方法
  • 6 Animation Guidelines for UX Design
    • Transitional Interfaces
    • UI Animation and UX: A Not-So-Secret Friendship
    • Invisible animation
    • Creating Usability with Motion: The UX in Motion Manifesto
  • Designing Interface Animation ，主要是讲品牌动画。
  • Animation principles in motion design ，一些动画效果的套路和演示
  • Creating Usability with Motion: The UX in Motion Manifesto
  • Integrating Animation into a Design System
  • Great UI/UX Animations 第一组
  • Great UI/UX Animations 第二组

相关资源​

文章资源​

  • Web Designer News ，文章聚合的网站。
  • Marvel Blog ，团队博客。
  • The Next Web ，主要涵盖国际技术新闻、商业和文化等多个方面。
  • Medium - Design ，好文章的集散地。
  • Smashing Magazine ，专业的 Web 设计师和程序员。
  • Sitepoint ，给 Web 前端程序员和设计师看的文章

设计收集​

  • Awwwards ，给一些设计得不错网站的评分。
  • One Page Love ，一个单页的网页设计的收集。
  • Inspired UI ，移动 App 的设计模式。
  • Behance，有很不错的很有创意的作品。
  • Dribbble ，可以看到一些很不错的作品，还可以在这里看到很多不错的设计师。
  • UI Movement ，有很多很不错的 UI 设计，大量的动画。